<template>
	<view class="mySetting">
		<view class="set_items f f_align f_align_center">
			<view class="set_label bold">头像</view>
			<view class="f f_align_center r_handle_text" @click="editHeadImg">
				<view class="r_tip_text">
					<image :src="userInfo.userHeadUrl" class="head_img" mode=""></image>
				</view>
				<i class="iconfont iconzu5536"></i>
			</view>
		</view>
		<view class="set_items f f_align f_align_center mb" @click="$navTo('./editName')">
			<view class="set_label bold">昵称</view>
			<view class="f f_align_center r_handle_text set">
				<view class="r_tip_text">{{userInfo.userName}}</view>
			</view>
		</view>

		<!-- <view class="set_items f f_align f_align_center">
			<view class="set_label bold">绑定微信</view>
			<view class="f f_align_center r_handle_text">
				<view class="r_tip_text">未绑定</view>
				<i class="iconfont iconzu5536"></i>
			</view>
		</view> -->
		<view class="set_items f f_align f_align_center">
			<view class="set_label bold">手机号码</view>
			<view class="f f_align_center r_handle_text set">
				<view class="r_tip_text">{{userInfo.mobile}}</view>
			</view>
		</view>
		<view class="set_items f f_align f_align_center mb" @click="$navTo('./editPw')">
			<view class="set_label bold">修改密码</view>
			<view class="f f_align_center r_handle_text">
				<view class="r_tip_text">去修改</view>
				<i class="iconfont iconzu5536"></i>
			</view>
		</view>

		<view class="set_items f f_align f_align_center" @click="$navTo('./bindCard')">
			<view class="set_label bold">银行卡</view>
			<view class="f f_align_center r_handle_text">
				<view class="r_tip_text">去修改</view>
				<i class="iconfont iconzu5536"></i>
			</view>
		</view>
		<view class="set_items f f_align f_align_center" @click="$navTo('./bindWx?type=10014002')">
			<view class="set_label bold">微信</view>
			<view class="f f_align_center r_handle_text">
				<view class="r_tip_text">去修改</view>
				<i class="iconfont iconzu5536"></i>
			</view>
		</view>
		<view class="set_items f f_align f_align_center mb" @click="$navTo('./bindWx?type=10014001')">
			<view class="set_label bold">支付宝</view>
			<view class="f f_align_center r_handle_text">
				<view class="r_tip_text">去修改</view>
				<i class="iconfont iconzu5536"></i>
			</view>
		</view>

		<view class="set_items f f_align f_align_center mb" @click="setPassword">
			<view class="set_label bold">支付密码</view>
			<view class="f f_align_center r_handle_text">
				<view class="r_tip_text">{{userInfo.payPassword && userInfo.payPassword != '' ? '已设置' : '未设置'}}</view>
				<i class="iconfont iconzu5536"></i>
			</view>
		</view>


		<view class="bb_set_btn" @click="loginOut">退出</view>

		<!-- 密码验证 -->
		<!-- 密码验证哦 -->
		<toast :visible.sync="visibleToast" :showClose="false">
			<template slot="content">
				<view class="toast_warp">
					<view class="f f_align f_align_center title">
						<view class=""></view>
						<text class="bold">设置支付密码</text>
						<i class="iconfont iconlianhe49" @click="visibleToast = false"></i>
					</view>
					<input :auto-focus="true" type="password" class="areaStyle" v-model="password" maxlength="20" placeholder="输入登录密码" />
					<input type="password" class="areaStyle" v-model="payPassword" maxlength="20" placeholder="输入支付密码" />
					<button :loading="loadings" class="biding_btn bold" @click="isOkDone()">
						{{loadings ? '验证中...' : '确认密码'}}
					</button>
				</view>
			</template>
		</toast>
	</view>
</template>

<script>
	import { _defaultHead } from '../../utils/util.js'
	import $uplaod from '../../utils/upload.js'
	import pwInput from '@/components/pwInput/pwInput'
	export default {
		data() {
			return {
				userInfo:{
					userName:'--',
					invitation:'--',
					mobile:'',
					userHeadUrl:'/default/default_user_head.png',
					payPassword:''
				},
				loadings:false,
				visibleToast:false,

				password:'',
				payPassword:''
			};
		},
		onShow() {
			this.getUserInfo();
		},
		methods:{
			//获取用户信息哦
			async getUserInfo(){
				const _this = this;
				let res = (await _this.$http('/api/auth/user/getUserInfo','POST',{})).data;
				if(res && res.code == '0'){
					let userInfo = res.data;
					_this.userInfo = userInfo;
					uni.setStorageSync('userInfo',userInfo);
					console.log(_this.userInfo)
				}
			},
			//退出登录
			loginOut(){
				const _this =this;
				uni.showActionSheet({
					itemList:['确定要退出登录嘛？'],
					success(res) {
						_this.loginOutAxios()
					}
				})
			},
			//退出登录哦
			async loginOutAxios(){
				const _this = this;
				let res = (await _this.$http('/api/auth/user/logout','POST',{})).data;
				if(res && res.code == '0'){
					_this.$showToast('退出登录成功～');
					//清空本地缓存
					_this.$clearLocal();
					_this.$relTo('../login/login');
				}
			},
			defaultHead(url){
				return _defaultHead(url);
			},
			//修改头像
			editHeadImg(){
				const _this = this;
				uni.chooseImage({
					count:1,
					sizeType:['compressed'],
					success: async (res) => {
						let images = await $uplaod(res.tempFilePaths[0]);
						_this.editUserHead(images);
					}
				})
			},
			//修改头像哦
			async editUserHead(url){
				const _this = this;
				let res = (await _this.$http('/api/auth/user/updateUserInfo',"POST",{
					userHeadUrl:url
				})).data;
				if(res && res.code == '0'){
					_this.$showToast(res.msg);
					_this.getUserInfo();
				}else{
					_this.$showToast(res.msg);
				}
			},
			setPassword(){
				this.visibleToast = true;
			},
			//返回密码 设置密码
			isOkDone(){
				const _this = this;
				if(_this.password == ''){
					return _this.$showToast('请输入您的登录密码')
				}
				if(_this.payPassword.length == ''){
					return _this.$showToast('请输入支付密码～')
				}
				if(_this.payPassword.length < 4){
					return _this.$showToast('支付密码最少四位～')
				}
				if(_this.loadings){
					return _this.$showToast('设置中，请稍候～')
				}
				_this.loadings = true;
				_this.$http('/api/auth/user/addPayPassword','POST',{
					password:_this.password,
					payPassword:_this.payPassword
				}).then(res=>{
					_this.loadings = false;
					if(res && res.data.code == '0'){
						_this.visibleToast = false;
						_this.$showToast('设置支付密码成功');
						_this.getUserInfo();
					}else{
						_this.$showToast(res.data.msg);
					}
				}).catch(()=>{
					_this.loadings = false;
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.biding_btn{
		width: 300rpx;
	}
	.toast_warp{
		box-sizing: border-box;
		width: 100%;
		position: absolute;
		bottom: 0;left: 0;right: 0;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding:24rpx 34rpx;
		.title{
			padding-bottom: 24rpx;
			font-size: 32rpx;
			.iconfont{
				transform: rotateZ(45deg);
			}
		}
		.areaStyle{
			box-sizing: border-box;
			width: 100%;
			width: 100%;
			height: 80rpx;
			border: solid 1rpx #3F536E;
			border-radius: 8rpx;
			padding: 10rpx;
			margin-top: 40rpx;
		}
	}


	.mySetting{
		width: 100%;
		border-top: solid 2rpx #E6E6E6;
		background-color: #E6E6E6;
		min-height: 100vh;
		.set_items{
			background-color: #fff;
			padding: 12rpx 24rpx;
			min-height: 76rpx;
			border-bottom: solid 1rpx #E6E6E6;
			color: #333;
			&.mb{
				border-bottom: none;
				margin-bottom: 16rpx;
			}
			.r_handle_text{
				color: #B8B8B8;
				.r_tip_text{
					color: #999;
					.head_img{
						width: 86rpx;height: 86rpx;
						border-radius: 50%;
					}
				}
				&.set{
					margin-right: 30rpx;
				}
			}
		}
		.bb_set_btn{
			width: 700rpx;
			height: 88rpx;
			background-color: #fff;
			border-radius: 12rpx;
			font-size: 32rpx;
			color: #FD2929;
			@include flex_center;
			margin: 400rpx auto 0;
		}
	}
</style>
